<template>
	<view class="membership-card">
		<!-- 我的会员卡 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">我的会员卡</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c  bg-ff po-re"
			style=""
			:style="{ height: containerHeight }"
			v-if="caradinfo.level != 0"
		>
			<!-- 1 -->
			<view
				class="w-750 b-box d-flex flex-r ali-i-c just-c po-re"
				style="height: 278rpx;background: #F2F3F7;padding-top: 28rpx;z-index: 9;"
			>
				<view
					class="po-re"
					style="border-radius: 16rpx;overflow: hidden;width: 622rpx;height: 278rpx;z-index: 9;"
				>
					<image
						class="po-re"
						:src="require('@/static/jrjsbg.png')"
						style="width: 622rpx;height: 278rpx;z-index: 9;"
					></image>
				</view>
				<view
					class="po-ab b-box d-flex flex-r ali-i-c just-c"
					style="padding-top: 28rpx;width: inherit;height: inherit;top:0;right:0;left:0;z-index: 10;background-color: rgba(255,255,255,0);"
				>
					<view
						class="w-100 d-flex flex-c ali-i-c just-s b-box"
						style="width: 622rpx;height: 278rpx;padding: 24rpx 28rpx;border-radius: 16rpx;overflow: hidden;"
					>
						<view class="w-100 b-box d-flex flex-r ali-i-c just-e" style="">
							<text style="font-size: 26rpx;" class="pf-sc fw-400 custom-text">{{ endtime }}</text>
						</view>
						<view class="w-100 b-box d-flex flex-c ali-i-c just-c" style="flex: 1;">
							<view
								style="width: 104rpx;height:104rpx;border-radius:110rpx;overflow:hidden;margin-bottom: 14rpx;"
							>
								<image
									:src="'https://www.chejingjing.cn/' + user.avatar"
									style="width: 104rpx;height:104rpx"
								></image>
							</view>
							<view class="d-flex flex-r ali-i-c just-c">
								<text style="font-size: 500;" class="pf-sc fw-500 custom-text">
									{{ user.nickname }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view
				class="w-750 b-box bg-ff"
				style="height: 94rpx;z-index: 12;padding: 32rpx 40rpx 0rpx;text-align: center;"
			>
				<text class="pf-sc fw-500 c-000" style="font-size: 30rpx;">会员权益</text>
			</view>

			<view
				class=" b-box po-re bg-ff"
				style="width: 670rpx;z-index: 10;flex:1 ;padding: 32rpx 0rpx 0rpx;"
			>
				<view style="border: 1rpx solid #EEEEEE;">
					<!-- title -->
					<view
						class="w-100 b-box bg-ff"
						style="height: 112rpx;margin-top: 2rpx;border-top: 1rpx solid #F6F6F6;margin: 0 auto;text-align: center;"
					>
						<view
							style="display: flex;justify-content: space-between;width: 650rpx;margin: 0 auto;color: #333;"
						>
							<text>上门洗车</text>
							<text>{{ bili }}折（终身）</text>
						</view>
						<view
							style="display: flex;justify-content: space-between;width: 650rpx;margin: 0 auto;padding-top: 50rpx;color: #333;"
						>
							<text>汽车用品</text>
							<text>{{ bili }}折（终身）</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="caradinfo.level == 0"></view>
	</view>
</template>

<script>
import { myvip, vipdetail } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
export default {
	components: {
		'u-navbar': Unavbar
	},
	data() {
		return {
			caradinfo: '',
			containerHeight: '',
			user: uni.getStorageSync('userInfo'),
			endtime: '',
			member: '',
			bili: ''
		};
	},
	methods: {
		getMember() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: 3
			};
			vipdetail(params).then(res => {
				this.member = res.data.data;
				let bili = this.member.bili / 10;
				this.bili = bili.toFixed(1);
			});
		},
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.getMember();
		//携带的参数
		let params = {
			token: uni.getStorageSync('usertoken')
		};
		myvip(params).then(res => {
			this.caradinfo = res.data.data;
			this.endtime = res.data.data.endtime;
			if(res.data.data.level == 0){
				uni.showModal({
					title:'提示',
					content:'您还没有开通军属卡，现在去开通？',
					success: (res) => {
						if(res.confirm){
							uni.navigateTo({
								url:'/userModelA/userA/BuyMember/BuyMember?id=3'
							})
						}else if(res.cancel){
							uni.navigateBack()
						}
					}
				})
			}
		
		});
	}
};
</script>

<style lang="scss">
.membership-card {
	.custom-text {
		background: linear-gradient(180deg, #ffe3b9 0%, #d17d59 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
</style>
